<template>
	<layout>
		<view class="index_box">
			
		
		<!-- 标题 -->
		<uni-card>
			<view style="text-align: center;">
				<p><strong><span style="font-family: 微软雅黑;font-size: 14px">{{title}}</span></strong></p>
			</view>
		</uni-card>

		<view class="content">
			<!-- 没有数据的话 -->
			<view class="u-page" v-if="!haveData">

				<h3>您还没有发布内容</h3>
			</view>
			<view class="u-page" v-else>
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<view class="album" v-for="item in players">
							<!-- 头象 -->
							<u-avatar class="album__avatar" :text="item.nickName.substring(0,1)" fontSize="40"
								randomBgColor></u-avatar>

							<view class="album__content">
								<u--text :text="item.nickName" type="primary" bold size="35"></u--text>
								<p>{{item.vDesc}}</p>
								<video class="vote-video" :src="item.vUrl" controls mode="widthFix"
									:poster="item.vCover"></video>
							</view>
						</view>
					</view>
					<!-- 返回 -->
					<view class="">
						<u-button text="返回" @click="callBack()"
							color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
					</view>
				</view>
			</view>

		</view>
		</view>
	</layout>
</template>
<script>
	import uniCard from '@/components/uni-card/uni-card.vue'
	import layout from '@/components/layout/index.vue'
	import api from '@/util/api.js'
	import {
		mapActions
	} from 'vuex'
	import vote from '@/util/vote.js'

	export default {
		data() {
			return {
				title: "和我们一起拜年吧",
				// 所有的视频数据
				players: [],

				// 宽度
				albumWidth: 0,
				// 是否获取到视频数据？
				haveData: false,
				// 视频的详情
				nickName: '',
				vCover: '',
				vDesc: '',
				vUrl: '',
				page: '',




			}
		},
		onLoad(options) {
			const {
				setNavigationBarTitle,
				// setPlayersLeft,
				// setPlayersRight
			} = this
			setNavigationBarTitle()
			/* 			setPlayersLeft()
						setPlayersRight() */
			this.getAllVideos(options)
			this.page = options.page;
		},
		onShow() {
			// this.getAllVideos('')
		},
		components: {
			uniCard,
			layout
		},
		methods: {
			...mapActions(['setNavigationBarTitle']),
			// 获取所有的拜年视频
			getAllVideos(options) {
				console.log("options", Object.keys(options).length === 0);
				if (Object.keys(options).length === 0) {
					// 完成 退出
					// 清空视频数据再添加
					this.clearVideo();
					// 获取uid
					const userInfo = uni.getStorageSync("userInfo");
					console.log(userInfo.userId, "userInfo");

					api.get("/vote/getVideoByUid", {
						uid: userInfo.userId
					}).then(res => {
						console.log("res", res.data);
						this.ranks = res.data
						if (res.data.length < 1) this.haveData = false
						else this.haveData = true
						this.ranks.forEach(item => {
							this.players.push(item);
						})
					})

				} else {
					console.log("用op的参数");
					const data = {
						nickName: options.nickName,
						vCover: options.vCover,
						vDesc: options.vDesc,
						vUrl: options.vUrl,
					}
					this.players.push(data)
					// 改变状态
					this.haveData = true;
				}

			},
			// 清空所有的视频数据
			clearVideo() {
				this.players = []
				// 分给左右两边
				this.players_left = [];
				this.players_right = [];
			},
			// 返回上个页面
			callBack() {
				console.log(this.page);
				if (this.page == "catInfo") {
					return uni.switchTab({
						url: "/pages/rankingList/index"
					})
				}
				// 从首页进来 退回主页去
				if(this.page=='indexPage'){
					return uni.switchTab({
						url: "/pages/index/index"
					})
				}
				uni.switchTab({
					url: "/pages/user/userInfo"
				})
			},

			// 其他的方法

		}
	}
</script>

<style scoped lang="scss">
	.index_box{
		/* 背景图 */
		background: url("@/static/images/banner/banner_baoming.jpg");
		/* or repeat-y */
		background-repeat: repeat;
	}
	.content {
		font-size: 30rpx;
		font-weight: 400;
		display: flex;
		margin: 0 10rpx;
		margin-top: 100rpx;
		padding-bottom: 150rpx;

		.li {
			width: 50%;

			.vote-img {
				width: 100%;
				vertical-align: middle;
			}

			.uni-card {
				margin: 10rpx 5rpx;

				.uni-card__footer {
					border: 0;

					.footer-box {
						text-align: center;
						margin: 10rpx 0;

					}

					.footer-bnt {
						button {
							color: #fff;
							background: #FC8515;
						}
					}
				}
			}
		}

		.content-left {}

		.content-right {}
	}

	.album {
		display: flex;
		align-items: flex-start;
		padding: 15px;
		/* 调整内边距，使整体更为宽敞 */
		background-color: #f5f5f5;
		/* 背景色 */
		border-radius: 10px;
		/* 圆角 */
		margin-bottom: 15px;
		/* 调整底部外边距 */
		/* 半透明 */
		opacity: 0.94; /* 设置透明度为 50% */


		&__avatar {
			background-color: #fff;
			/* 头像背景色 */
			padding: 5px;
			/* 调整内边距 */
			border-radius: 50%;
			/* 圆形头像 */
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			/* 添加阴影效果 */
		}

		&__content {
			margin-left: 10px;
			/* 调整左边距 */
			flex: 1;
		}

		// 消息背景
		.album__content {
			width: 40vh;
			

		}

		.vote-video {
			width: 70%;
			/* 视频宽度 100% */
			border-radius: 10px;
			/* 圆角 */
			outline: none;
			/* 去除默认样式 */
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			/* 添加阴影效果 */
			height: 300rpx;
		}
	}

	.album__avatar {
		border-radius: 25px;
		/* 调整头像圆角 */
	}
</style>